<script lang="ts" setup>
	import { ref, defineProps } from "vue";
	const posterDemo = ref(null)
	const props = defineProps({
		avatar: {
			type: String,
			default: '',

		},
		name: {
			type: String,
			default: '',

		},
		productImg: {
			type: String,
			default: '',

		},
		iconText: {
			type: String,
			default: '',

		},
		producName: {
			type: String,
			default: '',

		},
		qrcode: {
			type: String,
			default: '',

		}

	})
	const avatar = ref(props.avatar)
	const name = ref(props.name)
	const qrcode = ref(props.qrcode)
	const productImg = ref(props.productImg)
	const producName = ref(props.producName)
	const iconText = ref(props.iconText)
	const show = ref(true)
	const path = ref<any>('')
	const btnFlag = ref(false)

	const fail = (v) => {
		console.log(v)
	}
	const done = (v) => {
		console.log('绘制完成:')
		btnFlag.value = true
	}
	const emit = defineEmits(["change"])
	const close = () => {
		emit("change", false)
	}

	const save = () => {

		posterDemo.value.canvasToTempFilePathSync({
			fileType: 'jpg',
			quality: 1,
			success: (res : any) => {
				// console.log(res.tempFilePath)
				path.value = res.tempFilePath
				saveImage()
			},
			fail(e : any) {
				console.log('???????????', e)
			}
		})
	}
	// 保存图征
	const saveImage = () => {

		// #ifndef H5
		uni.saveImageToPhotosAlbum({
			filePath: path.value,
			success(res) {
				console.log(res)
				uni.showToast({
					title: '已保存到相册',
					icon: 'success',
					duration: 2000
				});
			},
		});
		// #endif
	}
</script>
<template>
	<uv-overlay :show="show" @click="close">
		<!-- <image v-if="path" :src="path" mode="widthFix"></image> -->
		<l-painter
			css="width: 750rpx; padding-bottom: 100rpx; background: linear-gradient(180deg,#ff971b 0%, #ff5000 100%)"
			@fail="fail" @done="done" pathType="url" ref="posterDemo" performance>
			<l-painter-image :src="avatar"
				css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;" />
			<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
				<l-painter-text :text="name"
					css="display: block; padding-bottom: 10rpx; color: #ffffff; font-size: 32rpx; fontWeight: bold" />
				<l-painter-text text="品质保证 | 售后无忧" css="color: rgba(255,255,255,.7); font-size: 24rpx" />
			</l-painter-view>
			<l-painter-view
				css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
				<!-- <l-painter-image :src="productImg"
				css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx;" /> -->
				<l-painter-image :src="productImg" css="object-position: 50% 50%; width: 606rpx; height: 606rpx;" />
				<l-painter-view css="margin-top: 30rpx; display: flex">
					<l-painter-text uid="tag"
						css="position:absolute; top: 6rpx; padding: 5rpx 10rpx; color: #fff; background: #ffb400; font-size: 24rpx"
						:text="iconText"></l-painter-text>
					<l-painter-text
						css="text-indent: calc(tag.width + 10rpx); flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx;"
						:text="producName"></l-painter-text>
					<l-painter-qrcode css="width: 128rpx; height: 128rpx;" :text="qrcode"></l-painter-qrcode>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
		<view class="brn-box">
			<button v-if="btnFlag" class="btn btn1" @click="close">取消</button>
			<button v-if="btnFlag" class="btn btn2" @click="save">保存</button>
		</view>

	</uv-overlay>
</template>
<style lang="scss" scoped>
	.dn {
		display: none;
	}

	.brn-box {
		text-align: center;
		margin-top: 30rpx;
	}

	.btn {
		display: inline-block;
		width: 200rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: linear-gradient(to bottom, rgb(255, 146, 25), rgb(255, 83, 1));
		color: #fff;
	}

	.btn1 {
		margin-right: 100rpx;
	}

	.btn2 {
		margin-left: 100rpx;
	}
</style>